---
layout: default
---

<!-- Post Header -->
<style type="text/css">
	header.intro-header {
		position: relative;
		background-image: url('{{ site.baseurl }}/{% if page.header-img %}{{ page.header-img }}{% else %}{{ site.header-img }}{% endif %}')
	}

		{
		% if page.header-mask %
	}

	header.intro-header .header-mask {
		width: 100%;
		height: 100%;
		position: absolute;

		background: rgba(0, 0, 0, {
				{
				page.header-mask
			}
		}

		);
	}

		{
		% endif %
	}
</style>
<header class="intro-header">
	<div class="header-mask"></div>
	<div class="container">
		<div class="row">
			<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
				<div class="post-heading">
					<div class="tags">
						{% for tag in page.tags %}
							<a class="tag" href="{{ site.baseurl }}/tags/#{{ tag }}" title="{{ tag }}">{{ tag }}</a>
						{% endfor %}
					</div>
					<h1>{{ page.title }}</h1>
					{% if page.subtitle %}
						<h2 class="subheading">{{ page.subtitle }}</h2>
					{% endif %}
					<span class="meta">Posted by {% if page.author %}{{ page.author }}{% else %}{{ site.title }}{% endif %} on {{ page.date | date: "%B %-d, %Y" }}</span>
				</div>
			</div>
		</div>
	</div>
</header>

<!-- Post Content -->
<article>
	<div class="container">
		<div class="row">

			<!-- Post Container -->
			<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 post-container">
				{{ content }}

				<hr style="visibility: hidden;">
				<ul class="pager">
					{% if page.previous.url %}
						<li class="previous">
							<a href="{{ page.previous.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.previous.title}}">
								Previous
								<br>
								<span>{{page.previous.title}}</span>
							</a>
						</li>
					{% endif %}
					{% if page.next.url %}
						<li class="next">
							<a href="{{ page.next.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.next.title}}">
								Next<br>
								<span>{{page.next.title}}</span>
							</a>
						</li>
					{% endif %}
				</ul>


				<!--Gitalk评论start  -->
				{% if site.gitalk.enable %}
				<!-- 引入Gitalk评论插件  -->
				<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
				<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
				<div id="gitalk-container"></div>
				<!-- 引入一个生产md5的js，用于对id值进行处理，防止其过长 -->
				<!-- Thank DF:https://github.com/NSDingFan/NSDingFan.github.io/issues/3#issuecomment-407496538 -->
				<script src="{{ site.baseurl }}/js/md5.min.js"></script>
				<script type="text/javascript">
					var gitalk = new Gitalk({
						clientID: '{{site.gitalk.clientID}}',
						clientSecret: '{{site.gitalk.clientSecret}}',
						repo: '{{site.gitalk.repo}}',
						owner: '{{site.gitalk.owner}}',
						admin: ['{{site.gitalk.admin}}'],
						distractionFreeMode: {{ site.gitalk.distractionFreeMode}},
						id: md5(location.pathname),
					});
					gitalk.render('gitalk-container');
				</script>
				{% endif %}
				<!-- Gitalk end -->

			</div>

			<!-- Side Catalog Container -->
			{% if page.catalog %}
			<div class="col-lg-2 col-lg-offset-0 visible-lg-block sidebar-container catalog-container">
				<div class="side-catalog">
					<hr class="hidden-sm hidden-xs">
					<h5>
						<a class="catalog-toggle" href="#">CATALOG</a>
					</h5>
					<ul class="catalog-body"></ul>
				</div>
			</div>
			{% endif %}

			<!-- Sidebar Container -->
			<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 sidebar-container">
				<!-- Featured Tags -->
				{% if site.featured-tags %}
					<section>
						<hr class="hidden-sm hidden-xs">
						<h5><a href="/tags/">FEATURED TAGS</a></h5>
						<div class="tags">
							{% for tag in site.tags %}
								{% if tag[1].size > site.featured-condition-size %}
									<a href="/tags/#{{ tag[0] }}" title="{{ tag[0] }}" rel="{{ tag[1].size }}">
										{{ tag[0] }}
									</a>
								{% endif %}
							{% endfor %}
						</div>
					</section>
				{% endif %}

				<!-- Friends Blog -->
				{% if site.friends %}
					<hr>
					<h5>FRIENDS</h5>
					<ul class="list-inline">
						{% for friend in site.friends %}
							<li><a href="{{friend.href}}">{{friend.title}}</a></li>
						{% endfor %}
					</ul>
				{% endif %}
			</div>
		</div>
	</div>
</article>

{% if site.anchorjs %}
<!-- async load function -->
<script>
	function async (u, c) {
		var d = document,
			t = 'script',
			o = d.createElement(t),
			s = d.getElementsByTagName(t)[0];
		o.src = u;
		if (c) {
			o.addEventListener('load', function(e) {
				c(null, e);
			}, false);
		}
		s.parentNode.insertBefore(o, s);
	}
</script>
 <!-- anchor-js, Doc:http://bryanbraun.github.io/anchorjs/ -->
<script>
	async ("//cdnjs.cloudflare.com/ajax/libs/anchor-js/1.1.1/anchor.min.js", function() {
		anchors.add().remove('.intro-header h1').remove('.subheading').remove('.sidebar-container h5');
	})
</script>
<style>
	/* place left on bigger screen */
	@media all and (min-width: 800px) {
		.anchorjs-link {
			position: absolute;
			left: -0.75em;
			font-size: 1.1em;
			margin-top: -0.1em;
		}
	}
</style>
{% endif %}
